<script setup lang="ts">
defineProps({
  expandText: {
    type: String,
    default: '展开',
  },
  collapseText: {
    type: String,
    default: '收起',
  },
})
const isExpand = ref(false)
</script>

<template>
  <view>
    <view
      v-if="!isExpand"
      class="pt-4 text-center"
      hover-class="icon-hover"
      @click="isExpand = !isExpand"
    >
      <wd-text :text="expandText" size="14px" color="#fd3535">
        <template #suffix>
          <wd-icon name="chevron-down" color="#fd3535" size="14" />
        </template>
      </wd-text>
    </view>
    <slot v-if="isExpand" />
    <view
      v-if="isExpand"
      class="pt-4 text-center"
      hover-class="icon-hover"
      @click="isExpand = !isExpand"
    >
      <wd-text :text="collapseText" size="14px" color="#fd3535">
        <template #suffix>
          <wd-icon name="chevron-up" color="#fd3535" size="14" />
        </template>
      </wd-text>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
